<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/plugins/select2/select2.css"/>
    <link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css"/>
    <script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<script>
    $(function () {
        typeList();
        $("#brand").select2();
        $("#specification").select2();
        $("#brandupdate").select2();
        $("#tbSpecificationupdate").select2();

    })

    function typeList() {
        $.ajax({
            url: "/tbTypeTemplate/tbTypeTemplateshow?name=" + $("#name").val(),
            data: {pageNum: $("#pageNum").val(), pageSize: $("#pageSize").val()},
            async: false,
            dataType: "json",
            type: "post",
            success: function (result) {
                console.log(result)
                if (result.code == 10000) {
                    var list = result.data.rows;
                    var tbody = "";
                    for (var i = 0; i < list.length; i++) {
                        tbody += '<tr><td><input type ="checkbox" name="check" value="' + list[i].id + '"></td>'
                        tbody += '<td>' + list[i].id + '</td>'
                        tbody += '<td>' + list[i].name + '</td>'

                        var brandIds = JSON.parse(list[i].brandIds)
                        tbody += '<td>';
                        var str1 = '';
                        for (var j = 0; j < brandIds.length; j++) {
                            str1 += ',' + brandIds[j].text
                        }
                        str1 = str1.substr(1);
                        tbody += str1
                        tbody += '</td>'
                        tbody += '<td>' + list[i].specIds + '</td>'
                        tbody += '<td></td>'
                        tbody += '<td className="text-center">'
                        tbody += '<button type="button" onclick="toUpdate(' + list[i].id + ')" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改 </button>'
                        tbody += '</td></tr>'
                    }
                    $("#typeTemplate").html(tbody);
                    $("#pageNum").val(result.data.pageNumber);
                    $("#pageSize").val(result.data.pageSize);
                    $("#pages").val(result.data.totalPage);
                } else {
                    $("#typeTemplate").html('<tr><td colspan="7">无数据</td></tr>');
                }
            }, error: function (data) {
                console.log("系统异常")
            }
        })
    }

    function toPage(obj) {
        var pageNum = $("#pageNum").val();
        var pages = $("#pages").val();

        if (obj == 1) {
            if (pageNum > 1) {
                $("#pageNum").val(pageNum - 1);
            }
        }
        if (obj == 2) {
            if (pageNum < pages) {
                $("#pageNum").val(parseInt(pageNum) + 1);
            }
        }
        typeList();
    }

    function keep() {
        var brandDatas = $("#brand").select2("data") //获取数据
        console.log(brandDatas)
        var brandList = [];
        for (var i = 0; i < brandDatas.length; i++) {
            brandList.push({id: brandDatas[i].id, text: brandDatas[i].text})
        }
        var brandListJson = JSON.stringify(brandList)//转换成字符串
        console.log(brandListJson)

        var specificationDatas = $("#specification").select2("data")
        var specificationList = []
        for (var i = 0; i < specificationDatas.length; i++) {
            specificationList.push({id: specificationDatas[i].id, text: specificationDatas[i].text})
        }
        var specificationListJson = JSON.stringify(specificationList)
        console.log(specificationListJson)

        var typaName = $("#name1").val();

        var names = document.getElementsByName("templatename")
        var nameList = []
        for (var i = 0; i < names.length; i++) {
            console.log(names[i].value)
            nameList.push({text: names[i].value})
        }
        var nameListJson = JSON.stringify(nameList)
        console.log(nameListJson)


        $.ajax({
            url: "/tbTypeTemplate/add",
            type: "post",
            dataType: "json",
            data: {
                name: typaName,
                brandIds: brandListJson,
                specIds: specificationListJson,
                customAttributeItems: nameListJson
            },
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    alert("增加成功");
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function toUpdate(id) {
        $.ajax({
            url: "/tbTypeTemplate/toupdate?id=" + id,
            type: "post",
            dataType: "json",
            async: true,
            success: function (result) {
                console.log(result)
                if (result.code == 10000) {
                    var typeTemplate = result.data;
                    var brandList = JSON.parse(typeTemplate.brandIds)
                    var ids = [];
                    for (var i = 0; i < brandList.length; i++) {
                        ids.push(brandList[i].id)
                    }
                    console.log(ids)
                    $("#brandupdate").val(ids).trigger('change');//赋值并触发

                    var specIdslist = JSON.parse(typeTemplate.specIds)
                    console.log(specIdslist)
                    var idss = []
                    for (var j = 0; j < specIdslist.length; j++) {
                        idss.push(specIdslist[j].id)
                    }
                    $("#tbSpecificationupdate").val(idss).trigger('change')

                    var customAttributeItemslist = JSON.parse(typeTemplate.customAttributeItems)
                    var idsss = []
                    for (var k = 0; k < customAttributeItemslist.length; k++) {
                        idsss.push(customAttributeItemslist[k].text)
                    }
                    $("#nameupdate").val(typeTemplate.name)
                    $("#templateId").val(typeTemplate.id)
                    $("#property1").val(idsss[0])
                    $("#property2").val(idsss[1])
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function keepUpdate() {
        var brandupdatedata = $("#brandupdate").select2('data');
        var brandlist = []
        for (var i = 0; i < brandupdatedata.length; i++) {
            brandlist.push({id:brandupdatedata[i].id,text:brandupdatedata[i].text})
        }
        var brandString = JSON.stringify(brandlist)
        console.log(brandString)




        var tbSpecificationupdatedata = $("#tbSpecificationupdate").select2('data');
        var tbSpecificationlist = []
        for (var i = 0; i < tbSpecificationupdatedata.length; i++) {
            tbSpecificationlist.push({id:tbSpecificationupdatedata[i].id,text:tbSpecificationupdatedata[i].text})
        }
        var tbSpecificationString = JSON.stringify(tbSpecificationlist)
        console.log(tbSpecificationString)



        var name = $("#nameupdate").val();
        var arr = document.getElementsByName("typenameupdate");
        var ids = [];
        for (var i = 0; i < arr.length; i++) {
            ids.push({text:arr[i].value});
        }
        var json = JSON.stringify(ids)
        var id = $("#templateId").val()

        $.ajax({
            url: "/tbTypeTemplate/update",
            type: "post",
            dataType: "json",
            data : {id : id,brandIds : brandString,specIds :tbSpecificationString,name:name,customAttributeItems:json},
            async: true,
            success: function (result) {
                if(result.code == 10000){
                    alert("修改成功");
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }

    function deleteList() {
        var byName = document.getElementsByName("check");
        var ids = [];
        for (var i = 0; i < byName.length; i++) {
            if (byName[i].checked){
                ids.push(byName[i].value)
            }
        }
        $.ajax({
            url: "/tbTypeTemplate/deleteIds?ids="+ids,
            type: "post",
            dataType: "json",
            async: true,
            success: function (result) {
                if (result.code == 10000) {
                    alert("删除成功");
                }
            },
            error: function (result) {
                alert("系统错误,请稍后再试");
            }
        })
    }
</script>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品类型模板管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#addModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" onclick="deleteList()" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>

                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                分类模板名称：<input name="name" id="name">
                <button class="btn btn-default" onclick="typeList()">查询</button>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">模板ID</th>
                <th class="sorting">分类模板名称</th>
                <th class="sorting">关联品牌</th>
                <th class="sorting">关联规格</th>
                <th class="sorting">扩展属性</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="typeTemplate">


            </tbody>
        </table>
        <!--数据列表/-->
        <div>
            <input type="hidden" id="pageNum">
            <input type="hidden" id="pageSize">
            <input type="hidden" id="pages">
            <a href="javascript:toPage(1)">上一页</a>
            <a href="javascript:toPage(2)">下一页</a>
        </div>

    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="ModalLabel">商品类型模板增加</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品类型</td>
                        <td><input class="form-control" placeholder="商品类型" id="name1" name="name"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td>
                            <select id="brand" multiple style="width: 100%">
                                <option th:each="brand :${tbBrands}" th:value="${brand.id}">[[${brand.name}]]</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td>
                            <select id="specification" multiple style="width: 100%">
                                <option th:each="specification :${tbSpecifications}" th:value="${specification.id}">
                                    [[${specification.specName}]]
                                </option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" title="新增扩展属性"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>

                            </div>
                            <table class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td><input class="form-control" placeholder="属性名称" name="templatename"></td>
                                    <td>
                                        <button type="button" class="btn btn-default" title="删除"><i
                                                class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td><input class="form-control" placeholder="属性名称" name="templatename"></td>
                                    <td>
                                        <button type="button" class="btn btn-default" title="删除"><i
                                                class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button onclick="keep()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">商品类型模板编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>商品类型</td>
                        <td><input class="form-control" id="nameupdate" placeholder="商品类型" name="name"> <input type="hidden" id="templateId"></td>
                    </tr>
                    <tr>
                        <td>关联品牌</td>
                        <td>
                            <select id="brandupdate" multiple style="width: 100%">
                                <option th:each="brand :${tbBrands}" th:value="${brand.id}">[[${brand.name}]]</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>关联规格</td>
                        <td>
                            <select id="tbSpecificationupdate" multiple style="width: 100%">
                                <option th:each="specification :${tbSpecifications}" th:value="${specification.id}">
                                    [[${specification.specName}]]
                                </option>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td>扩展属性</td>
                        <td>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default" title="新增扩展属性"><i
                                        class="fa fa-file-o"></i> 新增扩展属性
                                </button>

                            </div>
                            <table class="table table-bordered table-striped" width="800px">
                                <thead>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td>属性名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td><input class="form-control" id="property1" placeholder="属性名称" name="typenameupdate"></td>
                                    <td>
                                        <button type="button" class="btn btn-default" title="删除"><i
                                                class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox" class="icheckbox_square-blue"></td>
                                    <td><input class="form-control" id="property2" placeholder="属性名称" name="typenameupdate"></td>
                                    <td>
                                        <button type="button" class="btn btn-default" title="删除"><i
                                                class="fa fa-trash-o"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                        </td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button onclick="keepUpdate()" class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>